<template>
	<view class="user">
		<view class="user_div">
			<up-modal :show="store.modalShow" title="退出登录" content='退出登录将会清除所有数据' contentTextAlign='center'
			:showCancelButton="true" @confirm="store.confirm(homeStore,hospitalStore,goleStore)" @cancel="store.cancel()"></up-modal>
			<view class="userInfo">
				<view class="userMsg">
					<view class="avatar">
						<image src="../../static/avatar.png" mode="aspectFill" class="avatar_img"></image>
					</view>
					<view class="msg">
						<view class="userStatus">{{status}}</view>
						<view class="msgID">ID：{{store.id}}</view>
						<view class="msgPhoneStatus">
							<image src="../../static/phone.svg" mode="aspectFit" style="width: 32rpx; height: 32rpx;"></image>
							<text style="margin-left: 10rpx;">已绑定手机号</text>
						</view>
					</view>
				</view>
			</view>
			<view class="user_operation">
				<view class="user_list">
					<view class="user_item userChangePwd">
						<view class="user_title">修改密码</view>
						<image src="../../static/herf.svg" mode="aspectFit" style="width: 32rpx; height: 32rpx;" 
						@click="store.pwdPath()"></image>
					</view>
					<view class="user_item loginOut">
						<view class="user_title">完善信息</view>
						<image src="../../static/herf.svg" mode="aspectFit" style="width: 32rpx; height: 32rpx;"
						@click="store.userInfoPath()"></image>
					</view>
				</view>
			</view>
			<view class="user_operation2">
				<view class="user_list">
					<view class="user_item userChangePwd">
						<view class="user_title">定位记录</view>
						<image src="../../static/herf.svg" mode="aspectFit" style="width: 32rpx; height: 32rpx;"
						@click="store.historyPath()"></image>
					</view>
					<view class="user_item loginOut">
						<view class="user_title">使用教程</view>
						<image src="../../static/herf.svg" mode="aspectFit" style="width: 32rpx; height: 32rpx;"
						@click="store.usePath()"></image>
					</view>
					<view class="user_item loginOut">
						<view class="user_title">投诉反馈</view>
						<image src="../../static/herf.svg" mode="aspectFit" style="width: 32rpx; height: 32rpx;"
						@click="store.feedbackPath()"></image>
					</view>
					<view class="user_item loginOut">
						<view class="user_title">关于我们</view>
						<image src="../../static/herf.svg" mode="aspectFit" style="width: 32rpx; height: 32rpx;" 
						@click="store.aboutPath()"></image>
					</view>
				</view>
			</view>
			<up-button class="out" type="primary" text="退出登录 " color='#000033' @click="store.modalShow=true"
			shape='circle'></up-button>
		</view>
	</view>
</template>

<script setup>
import { computed } from 'vue';
import useUserStore from '../../store/user';
import useHomeStore from '../../store/home';
import useHospitalStore from '../../store/hospital';
import useGoleStore from '../../store/gole';
const store=useUserStore()
const homeStore=useHomeStore()
const hospitalStore=useHospitalStore()
const goleStore=useGoleStore()
const status=computed(()=>{
	const role=uni.getStorageSync('role')
	if(role==='0'){
		return '普通用户'
	}else if(role==='1'){
		return '管理员'
	}else if(role==='2'){
		return '超级管理员'
	}
})
</script>

<style scoped>
.user{
	width: 750rpx;
	flex:1;
	margin: 0 auto;
	background-color: #F7F7F7;
	display: flex;
}
.user_div{
	flex: 1;
	flex-direction: column;
}
uni-page-body{
	height: 100%;
}
.userInfo{
	width: 100%;
	height: 400rpx;
	background-color: #000033;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.userMsg{
	width: 100%;
	height: 150rpx;
	background-color: #000033;
	display: flex;
}
.avatar{
	width: 150rpx;
	height: 150rpx;
	background-color: #F7F7F7;
	margin-left: 50rpx;
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.msg{
	width: 250rpx;
	height: 150rpx;
	margin-left: 30rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.msgID{
	color: #F7F7F7;
	font-size: 28rpx;
	height: 60rpx;
	line-height: 60rpx;
}
.userStatus{
	height: 40rpx;
	background-color: #357ff7;
	width: 120rpx;
	font-size: 24rpx;
	text-align: center;
	border-radius: 14rpx;
	line-height: 40rpx;
	color: #F7F7F7;
}
.msgPhoneStatus{
	width: 210rpx;
	background-color: #373F4C;
	color: #F7F7F7;
	font-size: 28rpx;
	height: 45rpx;
	display: flex;
	align-items: center;
	border-radius: 8rpx;
	padding-left: 10rpx;
	padding-right: 10rpx;
}
.avatar_img{
	width: 100rpx;
	height: 100rpx;
}
.user_operation2{
	width: 750rpx;
	height: 400rpx;
}
.user_operation{
	width: 750rpx;
	height: 200rpx;
}
.user_list{
	margin: 20rpx;
	border-radius: 20rpx;
	background-color: white;
}
.user_item{
	border-bottom: 1px solid #ccc;
	height: 100rpx;
	box-sizing: border-box;
	color: #7b7b7b;
	display: flex;
	padding: 30rpx;
	justify-content: space-between;
	align-items: center;
}
.user_item:last-child{
	border: none;
}
.out{
	margin-top: 50rpx;
	width: 700rpx;
	margin-bottom: 200rpx;
}
</style>
